import { React, useRef } from "react";
import { NavLink, useNavigate } from "react-router-dom";
import "./home_appBar.css";
import { message, Button } from "antd";
import { SearchOutlined } from '@ant-design/icons';
import logo from "../../static/logo.png";
import downArrows from "../../static/向下箭头.png";
import Arrows from "../../static/向右箭头.png";
export default function HomeAppBar() {
  const list = useRef();
  const search_value = useRef();
  const search_button = useRef();
  const navigate = useNavigate();
  let onOff_List = true;
  function listShow(e) {
    if (onOff_List === true) {
      list.current.style.display = "block";
      e.target.style.backgroundImage = "url(" + downArrows + ")";
      onOff_List = false;
    } else {
      list.current.style.display = "none";
      e.target.style.backgroundImage = "url(" + Arrows + ")";
      onOff_List = true;
    }
  }
  function loading() {
    message.loading("请耐心等待，不要刷新页面，以防数据丢失", 1);
  }
  function search() {
    search_button.current.style.backgroundColor = '#4b943d'
    if (search_value.current.value) {
      navigate('/home/search', {
        state: search_value.current.value,
      })
    }
  }
  return (
    <div className="fixation">

      <h1 className="logo_header">
        <div className="logo_header_in">
          <div className="logo">
            <img src={logo} alt=""></img>
          </div>
          <div className="search">
            <div className="search_box">
              <input type="text" placeholder="请输入关键字进行搜索" ref={search_value} />
              <Button type="primary" icon={<SearchOutlined />} className="search_button" onClick={search} ref={search_button}>
              </Button>
            </div>
            <div className="search_top">
              <span>热门：奇异果</span>
              <span>牛排</span>
              <span>山竹</span>
              <span>牛油果</span>
            </div>
          </div>
          <div className="lfy_important">
            <NavLink to="/home/person">
              <div className="lfy_person_button">
                个人中心
              </div>
            </NavLink>
            <NavLink to="/home/shoppingCart" onClick={loading}>
              <div className="lfy_shopping_cart_button">
                购物车
              </div>
            </NavLink>
          </div>
        </div>
      </h1>
      <div className="AppBar">
        <ul>
          <li className="classify">
            <span onClick={listShow}>全部分类</span>
            <ol ref={list}>
              <li>新鲜水果</li>
              <li>生猛海鲜</li>
              <li>肉类家禽</li>
              <li>蛋奶素食</li>
              <li>田园蔬菜</li>
              <li>零食酒水</li>
              <li>粮油杂货</li>
              <li>礼品卡券</li>
              <li>家具用品</li>
            </ol>
          </li>
          <span>|</span>
          <NavLink to="/home/indexList">
            <li className="guide">首页</li>
          </NavLink>
          <span>|</span>
          <NavLink to="/home/local">
            <li className="guide">同城</li>
          </NavLink>
          <span>|</span>
          <NavLink to="/home/friday">
            <li className="guide">礼拜五</li>
          </NavLink>
          <span>|</span>
          <NavLink to="/home/integral">
            <li className="guide">积分商城</li>
          </NavLink>
          <span>|</span>
          <li className="guide">导航</li>
        </ul>
      </div>

    </div>
  );
}
